<template>
  <div class="home-page">
    <NavBar />
    
    <!-- 轮播图 -->
    <SimpleBanner />

    <!-- 产品介绍 -->
    <section class="products-section py-12 md:py-24 bg-gradient-to-br from-blue-50/30 via-white to-indigo-50/30 relative overflow-hidden" ref="productsRef">
      <!-- 装饰元素 -->
      <div class="absolute top-40 right-0 w-96 h-96 rounded-full bg-primary-blue/5 blur-3xl animate-pulse-very-slow"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col items-center mb-12 md:mb-20 transition-all duration-700" ref="productsTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-primary-blue to-indigo-600 mb-4 md:mb-6 rounded-full"></div>
          <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">工业胶水解决方案</h2>
          <p class="text-text-secondary max-w-2xl text-center text-sm md:text-base px-4">专业的工业胶水研发与生产，为各行业提供高性能、环保的粘胶解决方案</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
          <div
            v-for="(product, index) in homeProducts"
            :key="product.id"
            class="product-card bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 relative group"
            :ref="el => setProductRef(el, index)"
          >
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 to-indigo-600"></div>
            <div class="product-image aspect-[2/1] bg-gradient-to-br from-blue-600/5 to-indigo-50 border-b border-gray-100 flex items-center justify-center relative overflow-hidden group-hover:shadow-inner">
              <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-blue-600/10 blur-xl group-hover:opacity-70 transition-opacity duration-700"></div>
              <div class="absolute bottom-1/3 right-1/3 w-24 h-24 rounded-full bg-indigo-400/10 blur-xl group-hover:opacity-70 transition-opacity duration-700"></div>
              <img 
                :src="product.image || getImagePath('/shunganjiao1.png')" 
                :alt="product.name" 
                loading="lazy"
                class="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700"
              />
            </div>
            <div class="p-4 md:p-6">
              <h3 class="text-lg md:text-xl font-bold mb-2 md:mb-3 text-text-primary group-hover:text-blue-600 transition-colors duration-300">{{ product.name }}</h3>
              <p class="text-text-secondary mb-4 md:mb-5 leading-relaxed line-clamp-2 text-sm md:text-base">{{ product.description }}</p>
              <router-link to="/products" class="text-blue-600 font-medium hover:text-indigo-600 transition-all duration-300 inline-flex items-center group">
                查看产品
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 公司优势 -->
    <section class="advantages-section py-12 md:py-24 bg-bg-gray relative" ref="advantagesRef">
      <!-- 装饰元素 -->
      <div class="absolute bottom-40 left-0 w-96 h-96 rounded-full bg-blue-600/5 blur-3xl animate-pulse-very-slow-delay"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col items-center mb-12 md:mb-20 transition-all duration-700" ref="advantagesTitleRef">
          <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-4 md:mb-6 rounded-full"></div>
          <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">我们的优势</h2>
          <p class="text-text-secondary max-w-2xl text-center text-sm md:text-base px-4">多年行业经验，专业的研发团队，完善的质量管理体系</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 lg:gap-8">
          <div 
            v-for="(advantage, index) in advantages" 
            :key="advantage.id" 
            class="advantage-item text-center bg-white rounded-xl p-6 md:p-8 shadow-sm hover:shadow-lg transition-all duration-500 transform hover:-translate-y-2 group relative overflow-hidden"
            :ref="el => setAdvantageRef(el, index)"
          >
            <!-- 装饰背景 -->
            <div class="absolute inset-0 bg-gradient-to-br from-blue-600/0 via-blue-600/5 to-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
            
            <div class="advantage-icon bg-blue-600/10 text-blue-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6 transition-all duration-500 group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-indigo-600 group-hover:text-white group-hover:scale-110">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 transition-transform duration-500 group-hover:scale-110" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path :d="advantage.iconPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
              </svg>
            </div>
            <h3 class="text-xl font-bold mb-3 text-text-primary transition-colors duration-300 group-hover:text-primary-blue">{{ advantage.title }}</h3>
            <p class="text-text-secondary transition-colors duration-300 group-hover:text-gray-700">{{ advantage.description }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 应用案例 -->
    <section class="cases-section py-12 md:py-24 bg-gradient-to-br from-white via-blue-50/20 to-white relative" ref="casesRef">
      <!-- 装饰元素 -->
      <div class="absolute top-40 right-0 w-96 h-96 rounded-full bg-primary-blue/5 blur-3xl animate-pulse-very-slow"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 md:mb-20 transition-all duration-700" ref="casesTitleRef">
          <div>
            <div class="w-24 h-1 bg-gradient-to-r from-primary-blue to-indigo-600 mb-3 md:mb-4 rounded-full"></div>
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">成功案例</h2>
            <p class="text-text-secondary max-w-2xl text-sm md:text-base">我们与众多知名企业建立了长期合作关系，提供专业的胶水解决方案</p>
          </div>
          <router-link to="/cases" class="mt-4 md:mt-0 bg-gradient-to-r from-primary-blue to-indigo-600 text-white px-6 py-3 rounded-full font-medium hover:from-primary-blue-dark hover:to-indigo-700 transition-all duration-300 transform hover:-translate-y-1 shadow-sm flex items-center gap-2 group">
            查看更多案例
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </router-link>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
          <router-link 
            v-for="(caseItem, index) in cases" 
            :key="caseItem.id"
            to="/cases"
            class="case-card bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 group relative"
            :ref="el => setCaseRef(el, index)"
          >
            <!-- 装饰元素 -->
            <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 to-indigo-600"></div>
            <div 
              class="case-image h-52 border-b border-gray-100 flex items-center justify-center relative overflow-hidden group-hover:shadow-inner"
              :style="{ 
                backgroundImage: `url(${caseItem.image})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat'
              }"
            >
              <!-- 遮罩层，确保文字清晰可见 -->
              <div class="absolute inset-0 bg-gradient-to-b from-black/40 via-black/50 to-black/60 group-hover:from-black/30 group-hover:via-black/40 group-hover:to-black/50 transition-all duration-500"></div>
              
              <div class="relative z-10 text-white text-lg md:text-xl font-semibold px-4 text-center transition-all duration-700 group-hover:text-white group-hover:scale-105 drop-shadow-lg">
                {{ caseItem.title }}
              </div>
            </div>
            <div class="p-4 md:p-6">
              <h3 class="text-lg md:text-xl font-bold mb-2 md:mb-3 text-text-primary group-hover:text-blue-600 transition-colors duration-300">{{ caseItem.title }}</h3>
              <p class="text-text-secondary mb-4 md:mb-5 line-clamp-2 leading-relaxed text-sm md:text-base">{{ caseItem.description }}</p>
            
            <!-- 项目成果 -->
            <div class="flex flex-wrap gap-2 mb-4">
              <span 
                v-for="tag in caseItem.tags" 
                :key="tag"
                class="inline-block bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700 px-3 py-1 rounded-full text-xs font-medium border border-blue-200"
              >
                {{ tag }}
              </span>
            </div>
            
            <span class="inline-block bg-blue-600/10 text-blue-600 px-4 py-2 rounded-full text-sm hover:bg-gradient-to-r hover:from-blue-600/20 hover:to-indigo-500/20 transition-all duration-300">
              {{ caseItem.category }}
            </span>
            </div>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 统计栏 -->
    <section class="stats-section py-12 md:py-20 bg-gradient-to-r from-blue-600 via-blue-600 to-indigo-700 text-white">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 text-center">
          <div class="transform hover:scale-105 transition-transform duration-300" role="region" aria-label="统计数据">
            <div class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">500+</div>
            <div class="text-blue-100 text-xs md:text-sm lg:text-base">合作客户</div>
            <div class="text-xs text-blue-200 mt-1 hidden md:block">包括华为、比亚迪等知名企业</div>
          </div>
          <div class="transform hover:scale-105 transition-transform duration-300" role="region" aria-label="统计数据">
            <div class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">1000+</div>
            <div class="text-blue-100 text-xs md:text-sm lg:text-base">产品型号</div>
            <div class="text-xs text-blue-200 mt-1 hidden md:block">覆盖各行业应用需求</div>
          </div>
          <div class="transform hover:scale-105 transition-transform duration-300" role="region" aria-label="统计数据">
            <div class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">50+</div>
            <div class="text-blue-100 text-xs md:text-sm lg:text-base">技术专利</div>
            <div class="text-xs text-blue-200 mt-1 hidden md:block">国家级高新技术企业</div>
          </div>
          <div class="transform hover:scale-105 transition-transform duration-300" role="region" aria-label="统计数据">
            <div class="text-3xl md:text-4xl lg:text-5xl font-bold mb-2">24h</div>
            <div class="text-blue-100 text-xs md:text-sm lg:text-base">技术支持</div>
            <div class="text-xs text-blue-200 mt-1 hidden md:block">专业团队全天候服务</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻动态 -->
    <section class="news-section py-12 md:py-24 bg-gradient-to-br from-gray-50 via-blue-50/30 to-indigo-50/30" ref="newsRef">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 md:mb-20 transition-all duration-700" ref="newsTitleRef">
          <div>
            <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-3 md:mb-4 rounded-full"></div>
            <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700">新闻动态</h2>
            <p class="text-text-secondary max-w-2xl text-sm md:text-base">了解行业最新资讯和公司动态</p>
          </div>
          <router-link to="/news" class="mt-4 md:mt-0 text-blue-600 font-medium hover:text-indigo-600 transition-colors duration-300 inline-flex items-center group">
            更多新闻
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
          </router-link>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
          <router-link 
            v-for="(news, index) in newsList" 
            :key="news.id"
            :to="'/news/' + news.id"
            class="news-card bg-white rounded-xl overflow-hidden block shadow-sm hover:shadow-lg transition-all duration-500 transform hover:-translate-y-2 group relative"
            :ref="el => setNewsRef(el, index)"
          >
            <!-- 新闻图片 -->
            <div 
              class="news-image h-48 w-full relative overflow-hidden"
              :style="{ 
                backgroundImage: `url(${news.image})`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat'
              }"
            >
              <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
            </div>
            
            <!-- 内容区域 -->
            <div class="p-4 md:p-6 relative">
              <!-- 装饰元素 -->
              <div class="absolute inset-0 bg-gradient-to-br from-blue-600/0 via-blue-600/5 to-indigo-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
              
              <div class="flex items-center justify-between mb-2 md:mb-3 relative z-10 flex-wrap gap-2">
                <div class="text-blue-600 text-xs md:text-sm font-medium">{{ formatDate(news.date) }}</div>
                <div class="flex items-center gap-2">
                  <span class="inline-block bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-700 px-2 py-1 rounded text-xs font-medium border border-blue-200">
                    {{ news.category }}
                  </span>
                  <span class="text-gray-400 text-xs hidden md:inline">{{ news.readTime }}</span>
                </div>
              </div>
              <h3 class="text-lg md:text-xl font-bold mb-3 md:mb-4 text-text-primary group-hover:text-blue-600 transition-colors duration-300 relative z-10">{{ news.title }}</h3>
              <p class="text-text-secondary line-clamp-3 leading-relaxed transition-colors duration-300 group-hover:text-gray-700 relative z-10 text-sm md:text-base">{{ news.summary }}</p>
              
              <!-- 装饰箭头 -->
              <div class="absolute bottom-6 right-6 opacity-0 group-hover:opacity-100 transition-opacity duration-300 relative z-10">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                </svg>
              </div>
            </div>
          </router-link>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section py-28 bg-gradient-to-r from-blue-600 via-blue-600 to-indigo-700 text-white relative overflow-hidden" ref="contactRef">
      <!-- 装饰元素 -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute top-1/3 left-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute bottom-1/3 right-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl animate-pulse-slow-delay"></div>
        <div class="absolute top-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
        <div class="absolute bottom-10 left-10 w-32 h-32 bg-white/10 rounded-full blur-xl"></div>
        <!-- 网格装饰 -->
        <div class="absolute inset-0 bg-grid-white/[0.03] [mask-image:radial-gradient(ellipse_at_center,white,transparent_75%)]"></div>
      </div>
      
      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center mb-16 max-w-3xl mx-auto opacity-0 transform translate-y-8 transition-all duration-700" ref="contactTitleRef">
          <h2 class="text-3xl md:text-4xl font-bold mb-6">联系我们</h2>
          <p class="text-white/80 text-lg">如需了解更多产品信息或定制解决方案，请随时与我们联系</p>
        </div>
        
        <div class="flex flex-col md:flex-row justify-center gap-6 max-w-3xl mx-auto">
          <router-link to="/contact" class="btn-primary bg-white text-primary-blue px-8 py-4 rounded-full font-medium hover:bg-opacity-90 transition-all duration-500 text-center shadow-lg transform hover:-translate-y-1 hover:scale-105 flex items-center justify-center">
            在线咨询
          </router-link>
          <button @click="showPhoneNumber" class="bg-white/10 backdrop-blur-sm text-white border border-white/20 px-8 py-4 rounded-full font-medium hover:bg-white/20 transition-all duration-500 text-center shadow-lg transform hover:-translate-y-1 hover:scale-105 flex items-center justify-center">
            电话联系
          </button>
        </div>
      </div>
    </section>

    <Footer />
    
    <!-- 电话号码弹窗 -->
    <div v-if="showPhoneModal" class="phone-modal-overlay" @click="closePhoneModal">
      <div class="phone-modal" @click.stop>
        <div class="phone-modal-header">
          <h3>联系我们</h3>
          <button @click="closePhoneModal" class="close-btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div class="phone-modal-content">
          <div class="phone-icon">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
            </svg>
          </div>
          <p class="phone-label">联系电话</p>
          <p class="phone-number">19928872570</p>
          <div v-if="copySuccessMessage" class="copy-success-message">
            {{ copySuccessMessage }}
          </div>
          <div class="phone-actions">
            <a :href="'tel:19928872570'" @click.prevent="dialNow" class="phone-call-btn">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              立即拨打
            </a>
            <button @click="copyPhoneNumber" class="phone-copy-btn">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
              复制号码
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, type ComponentPublicInstance } from 'vue'
import NavBar from '@/components/NavBar.vue'
import Footer from '@/components/Footer.vue'
import SimpleBanner from '@/components/SimpleBanner.vue'

// 弹窗状态
const showPhoneModal = ref(false)
const copySuccessMessage = ref('')

// 滚动监听相关引用
const productsRef = ref<HTMLElement>()
const productsTitleRef = ref<HTMLElement>()
const productRefs = ref<HTMLElement[]>([])
const setProductRef = (el: Element | ComponentPublicInstance | null, index: number) => {
  const element = el as unknown as HTMLElement | null
  if (element) productRefs.value[index] = element
}
const advantagesRef = ref<HTMLElement>()
const advantagesTitleRef = ref<HTMLElement>()
const advantageRefs = ref<HTMLElement[]>([])
const setAdvantageRef = (el: Element | ComponentPublicInstance | null, index: number) => {
  const element = el as unknown as HTMLElement | null
  if (element) advantageRefs.value[index] = element
}
const casesRef = ref<HTMLElement>()
const casesTitleRef = ref<HTMLElement>()
const caseRefs = ref<HTMLElement[]>([])
const setCaseRef = (el: Element | ComponentPublicInstance | null, index: number) => {
  const element = el as unknown as HTMLElement | null
  if (element) caseRefs.value[index] = element
}
const newsRef = ref<HTMLElement>()
const newsTitleRef = ref<HTMLElement>()
const newsRefs = ref<HTMLElement[]>([])
const setNewsRef = (el: Element | ComponentPublicInstance | null, index: number) => {
  const element = el as unknown as HTMLElement | null
  if (element) newsRefs.value[index] = element
}
const contactRef = ref<HTMLElement>()
const contactTitleRef = ref<HTMLElement>()

// 检测元素是否在视口中
const isInViewport = (element: HTMLElement | undefined | null) => {
  if (!element || typeof element.getBoundingClientRect !== 'function') return false
  const rect = element.getBoundingClientRect()
  return (
    rect.top <= window.innerHeight * 0.8 &&
    rect.bottom >= 0
  )
}

// 监听滚动，触发动画
const animateOnScroll = () => {
  // 产品介绍部分动画 - 不再检查是否在视口中，确保内容始终显示
  if (productsTitleRef.value) {
    productsTitleRef.value.style.opacity = '1'
    productsTitleRef.value.style.transform = 'translateY(0)'
  }
  
  productRefs.value.forEach((product, index) => {
    if (product && product.style) {
      window.setTimeout(() => {
        if (product.style) {
          product.style.opacity = '1'
          product.style.transform = 'translateY(0)'
          product.style.transition = `opacity 0.5s ease, transform 0.5s ease`
        }
      }, 100 + index * 100)
    }
  })
  
  // 公司优势部分动画
  if (advantagesTitleRef.value) {
    advantagesTitleRef.value.style.opacity = '1'
    advantagesTitleRef.value.style.transform = 'translateY(0)'
  }
  
  advantageRefs.value.forEach((advantage, index) => {
    if (advantage && advantage.style) {
      window.setTimeout(() => {
        if (advantage.style) {
          advantage.style.opacity = '1'
          advantage.style.transform = 'translateY(0)'
          advantage.style.transition = `opacity 0.5s ease, transform 0.5s ease`
        }
      }, 100 + index * 120)
    }
  })
  
  // 应用案例部分动画
  if (casesTitleRef.value) {
    casesTitleRef.value.style.opacity = '1'
    casesTitleRef.value.style.transform = 'translateY(0)'
  }
  
  caseRefs.value.forEach((caseItem, index) => {
    if (caseItem && caseItem.style) {
      window.setTimeout(() => {
        if (caseItem.style) {
          caseItem.style.opacity = '1'
          caseItem.style.transform = 'translateY(0)'
          caseItem.style.transition = `opacity 0.5s ease, transform 0.5s ease`
        }
      }, 100 + index * 150)
    }
  })
  
  // 新闻动态部分动画
  if (newsTitleRef.value) {
    newsTitleRef.value.style.opacity = '1'
    newsTitleRef.value.style.transform = 'translateY(0)'
  }
  
  newsRefs.value.forEach((news, index) => {
    if (news && news.style) {
      window.setTimeout(() => {
        if (news.style) {
          news.style.opacity = '1'
          news.style.transform = 'translateY(0)'
          news.style.transition = `opacity 0.5s ease, transform 0.5s ease`
        }
      }, 100 + index * 100)
    }
  })
  
  // 联系我们部分动画
  if (contactTitleRef.value) {
    contactTitleRef.value.style.opacity = '1'
    contactTitleRef.value.style.transform = 'translateY(0)'
  }
}

// 格式化日期
const formatDate = (dateStr: string) => {
  const date = new Date(dateStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}.${month}.${day}`
}

// 设备检测 & 拨号
const isMobile = () => {
  if (typeof navigator === 'undefined') return false
  const ua = navigator.userAgent || navigator.vendor || ''
  return /android|iphone|ipad|ipod|windows phone|mqqbrowser|ucbrowser|harmonyos/i.test(ua)
}
const dialNow = () => {
  window.location.href = 'tel:19928872570'
}
// 显示电话号码弹窗（移动端直接拨号，PC端弹窗）
const showPhoneNumber = () => {
  if (isMobile()) {
    dialNow()
    return
  }
  showPhoneModal.value = true
}

// 关闭弹窗
const closePhoneModal = () => {
  showPhoneModal.value = false
  copySuccessMessage.value = ''
}

// 复制电话号码
const copyPhoneNumber = async () => {
  try {
    await navigator.clipboard.writeText('19928872570')
    copySuccessMessage.value = '✓ 电话号码已复制到剪贴板'
    setTimeout(() => {
      copySuccessMessage.value = ''
    }, 2000)
  } catch (err) {
    console.error('复制失败:', err)
    copySuccessMessage.value = '✗ 复制失败，请手动复制'
    setTimeout(() => {
      copySuccessMessage.value = ''
    }, 2000)
  }
}

// 轮播图相关逻辑已移至MinimalBanner组件中

// 初始化动画函数
const initializeAnimations = () => {
  // 初始化所有元素的过渡样式
  productRefs.value.forEach(product => {
    if (product && product.style) {
      product.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  advantageRefs.value.forEach(advantage => {
    if (advantage && advantage.style) {
      advantage.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  caseRefs.value.forEach(caseItem => {
    if (caseItem && caseItem.style) {
      caseItem.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  newsRefs.value.forEach(news => {
    if (news && news.style) {
      news.style.transition = 'opacity 0.5s ease, transform 0.5s ease'
    }
  })
  
  // 初始化标题的过渡样式
  if (productsTitleRef.value) {
    productsTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
  if (advantagesTitleRef.value) {
    advantagesTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
  if (casesTitleRef.value) {
    casesTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
  if (newsTitleRef.value) {
    newsTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
  if (contactTitleRef.value) {
    contactTitleRef.value.style.transition = 'opacity 0.7s ease, transform 0.7s ease'
  }
}

onMounted(async () => {
  await nextTick()
  initializeAnimations()
  animateOnScroll()
  window.addEventListener('scroll', animateOnScroll)
})

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', animateOnScroll)
})

// 产品数据
const products = [
  {
    id: 1,
    name: '环氧树脂胶',
    description: '高强度、耐高温、耐腐蚀，适用于金属、陶瓷等材料的粘接'
  },
  {
    id: 2,
    name: '瞬干胶',
    description: '快速固化，高强度，适用于电子元件、塑料等材料的粘接'
  },
  {
    id: 3,
    name: 'UV胶',
    description: '紫外线固化，环保无溶剂，适用于光学元件、医疗器械等领域'
  },
  {
    id: 4,
    name: '结构胶',
    description: '高韧性、耐老化，适用于建筑、汽车等结构粘接'
  },
  {
    id: 5,
    name: '厌氧胶',
    description: '缺氧固化，适用于螺纹锁固、密封等应用'
  },
  {
    id: 6,
    name: '热熔胶',
    description: '环保无毒，快速固化，适用于包装、木工等领域'
  }
]

// 首页产品区引用产品中心核心数据，只显示最新6个（若不足则全量）
import { products as allProductsRaw } from '@/data/products'
import { news as allNews } from '@/data/news'
import { getImagePath } from '@/utils/imageMap'
const homeProducts = allProductsRaw.slice(0, 6)

// 公司优势数据
const advantages = [
  {
    id: 1,
    title: '技术研发',
    description: '专业研发团队，持续创新，拥有多项专利技术',
    iconPath: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
  },
  {
    id: 2,
    title: '品质保障',
    description: '严格的质量管理体系，产品通过多项认证',
    iconPath: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
  },
  {
    id: 3,
    title: '定制服务',
    description: '根据客户需求提供个性化的胶水解决方案',
    iconPath: 'M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
  },
  {
    id: 4,
    title: '完善售后',
    description: '专业的技术支持团队，提供及时的售后保障',
    iconPath: 'M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4'
  }
]

// 案例数据
const cases = [
  {
    id: 1,
    title: '华为5G基站PCB板粘接项目',
    description: '为华为5G基站提供高性能PCB板粘接解决方案，产品具备优异的导电性和耐高温性能，确保基站稳定运行。项目成功帮助客户提升生产效率30%，产品良率提升至99.8%。',
    category: '电子通信',
    tags: ['效率提升30%', '良率99.8%', '5G认证'],
    image: getImagePath('/B-1.jpg')
  },
  {
    id: 2,
    title: '比亚迪新能源汽车电池包密封',
    description: '为比亚迪新能源汽车提供电池包密封粘接解决方案，产品具有优异的防水、防震和耐化学腐蚀性能，有效保护电池安全。项目成功通过IP68防水认证，使用寿命超过10年。',
    category: '新能源汽车',
    tags: ['IP68防水', '寿命10年+', '安全认证'],
    image: getImagePath('/B-2.jpg')
  },
  {
    id: 3,
    title: '迈瑞医疗监护设备组装',
    description: '为迈瑞医疗提供监护设备部件粘接和密封解决方案，产品符合医疗级标准，具有生物相容性和耐消毒性能。项目成功帮助客户产品通过CE认证和FDA认证。',
    category: '医疗设备',
    tags: ['CE认证', 'FDA认证', '医疗级'],
    image: getImagePath('/B-3.jpg')
  },
  {
    id: 4,
    title: '大疆无人机结构粘接',
    description: '为大疆无人机提供轻量化结构粘接解决方案，产品具有高强度、耐冲击和耐环境老化性能，确保无人机飞行安全。项目成功帮助客户减重15%，提升续航时间。',
    category: '航空航天',
    tags: ['减重15%', '续航提升', '航空认证'],
    image: getImagePath('/B-4.jpg')
  },
  {
    id: 5,
    title: '中芯国际芯片封装',
    description: '为中芯国际提供芯片封装用胶解决方案，产品具有优异的导热性和电绝缘性能，满足先进制程要求。项目成功帮助客户提升芯片可靠性，降低失效率至ppm级别。',
    category: '半导体',
    tags: ['ppm级失效率', '导热优异', '制程领先'],
    image: getImagePath('/B-5.jpg')
  },
  {
    id: 6,
    title: '格力电器空调压缩机密封',
    description: '为格力电器提供空调压缩机密封粘接解决方案，产品具有优异的耐冷媒和耐高温性能，确保压缩机长期稳定运行。项目成功帮助客户产品通过5000小时可靠性测试。',
    category: '家用电器',
    tags: ['5000h测试', '耐冷媒', '长寿命'],
    image: getImagePath('/B-6.jpg')
  }
]

// 新闻数据（按id顺序取前6条，确保图片按1-6顺序显示）
const newsList = allNews
  .slice(0, 6)
  .map((n: any) => ({
    id: n.id,
    title: n.title,
    summary: n.summary,
    date: n.date,
    category: n.categoryName || '',
    readTime: '',
    image: n.image || '',
  }))


</script>

<style scoped>
.home-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.banner-slide {
  background-size: cover;
  background-position: center;
}

/* 渐变背景类 */
.bg-gradient-blue {
  background: linear-gradient(to right, var(--color-primary-blue), var(--color-primary-blue-dark));
}

.bg-gradient-gray {
  background: linear-gradient(to right, #f8f9fa, #f1f3f5);
}

/* 网格装饰 */
.bg-grid-white {
  background-image: linear-gradient(#ffffff 1px, transparent 1px),
                    linear-gradient(to right, #ffffff 1px, transparent 1px);
  background-size: 20px 20px;
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

.animate-pulse-slow {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-slow-delay {
  animation: pulse 6s cubic-bezier(0.4, 0, 0.6, 1) 2s infinite;
}

.animate-pulse-very-slow {
  animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-very-slow-delay {
  animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) 3s infinite;
}

/* 强制卡片内文字为深色，避免白底白字不可见 */
.case-card,
.news-card,
.product-card,
.advantage-item {
  color: #1f2937; /* gray-800 */
}
.case-card h3,
.case-card p,
.case-card div,
.case-card span,
.news-card h3,
.news-card p,
.news-card div,
.news-card span,
.product-card h3,
.product-card p,
.advantage-item h3,
.advantage-item p {
  color: #1f2937; /* 覆盖可能的全局浅色文字 */
}
.text-text-secondary { color: #6b7280; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 电话号码弹窗样式 */
.phone-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.phone-modal {
  background: white;
  border-radius: 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.phone-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.phone-modal-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}

.close-btn {
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
}

.close-btn:hover {
  background: #e5e7eb;
  transform: rotate(90deg);
}

.phone-modal-content {
  padding: 32px 20px;
  text-align: center;
  box-sizing: border-box;
}

.phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  border-radius: 50%;
  color: white;
  animation: pulse-phone 2s ease-in-out infinite;
}

@keyframes pulse-phone {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.phone-label {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.phone-number {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

.copy-success-message {
  background: #d1fae5;
  color: #065f46;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.phone-actions {
  display: flex;
  gap: 12px;
  flex-direction: column;
  width: 100%;
  margin-top: 8px;
}

.phone-call-btn,
.phone-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  flex-shrink: 0;
  max-width: 100%;
}

.phone-call-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
  color: white;
}

.phone-call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

.phone-copy-btn {
  background: #f3f4f6;
  color: #374151;
}

.phone-copy-btn:hover {
  background: #e5e7eb;
  transform: translateY(-2px);
}
</style>